<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<%--<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"  %>--%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="page" %>
<page:page>
    <%--分页--%>
    <script src="${pageContext.request.contextPath}/js/page.js"></script>

    <div class="row">
        <div class="col-lg-12 page-header">
            <div class="col-md-3">
                <div class="form-group">
                    <span for="q_sn">中控号</span>
                    <span>
                    <input type="text" class="form-control " name="q_sn" id="q_sn" size="20" maxlength="50"/>
                </span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <span for="q_iccid">串号</span>
                    <span>
                    <input type="text" class="form-control " name="q_iccid" id="q_iccid" size="20" maxlength="50"/>
                </span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <span for="status">类型</span>
                    <span>
                        <select class="form-control" name='status' id='status' onchange="queryBut()">
                            <option value="" selected>-全部-</option>
                            <option value="00">正常</option>
                            <option value="01">单项停机</option>
                            <option value="02">停机</option>
                            <option value="03">预销号</option>
                            <option value="04">销号</option>
                            <option value="05">过户</option>
                            <option value="06">休眠</option>
                            <option value="07">待激活</option>
                            <option value="08">不存在</option>
                            <option value="99">未知</option>
                        </select>
                </span>
                </div>
            </div>
            <div class="col-xs-1 col-md-1 col-lg-1" style="padding-top: 20px;">
                <div class="form-group">
                    <button type="button" class="btn btn-outline btn-primary btn-sm" onclick="queryBut()"><i
                            class="fa fa-search"></i>&nbsp;查询
                    </button>
                        <%--<button type="button" class="btn btn-outline btn-primary btn-sm" onclick="batchUpdate()"><i class="fa fa-search"></i>&nbsp;批量更新</button>--%>
                </div>
            </div>

        </div>

        <!--列表开始-->
        <div class="col-lg-12">
            <div class="datagrid_container" style="margin-top: 10px;">
                    <%----%>
                <!-- /.row -->
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            SIM卡信息
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                <table class="table table-striped table-bordered table-hover tablefont" id="dataTables-example">
                                    <thead>
                                    <tr>
                                        <th class="center" style="width: 18%">中控号</th>
                                        <th class="center" style="width: 18%">串号</th>
                                        <th class="center" style="width: 8%">状态</th>
                                        <th class="center" style="width: 8%">是否激活</th>
                                        <th class="center" style="width: 8%">已用流量</th>
                                        <th class="center" style="width: 8%">剩余流量</th>
                                        <th class="center" style="width: 17%">最后更新时间</th>
                                        <th class="center" style="width: 15%">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody">
                                        <%--<tr class="odd gradeX"><td>车架号</td><td>中控号</td><td>GPS号</td> <td class="center">APP号</td> <td class="center">已下线</td> <td class="center"><a class = "fa fa-eye"></a></td></tr>--%>
                                        <%--<tr class="odd gradeX"><td>车架号</td><td>中控号</td><td>GPS号</td> <td class="center">APP号</td> <td class="center">运输中</td> <td class="center"><a class = "fa fa-eye"></a></td></tr>--%>
                                        <%--<tr class="odd gradeX"><td>车架号</td><td>中控号</td><td>GPS号</td> <td class="center">APP号</td> <td class="center">已销售</td> <td class="center"><a class = "fa fa-eye"></a></td></tr>--%>
                                    </tbody>
                                </table>
                            </div>


                            <!-- /.table-responsive -->
                            <div class="row">

                                <div class="col-sm-2" style="padding-top: 25px">
                                    <div class="dataTables_length">
                                        <select name="dataTables-example_length" onchange="pageCount()"
                                                id="dataTables-example_length" aria-controls="dataTables-example"
                                                class="form-control input-sm">
                                            <option value="10">每页10行</option>
                                            <option value="25">每页25行</option>
                                            <option value="50">每页50行</option>
                                            <option value="100">每页100行</option>
                                        </select>
                                    </div>

                                </div>
                                <div class="col-sm-3" style="padding-top: 30px">

                                    <div class="dataTables_info" id="dataTables-example_info" role="status"
                                         aria-live="polite"></div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="dataTables_paginate paging_simple_numbers"
                                         id="dataTables-example_paginate">
                                        <ul class="pagination" id="paginationPage">
                                            <li class="page active" class="paginate_button"
                                                aria-controls="dataTables-example"
                                                tabindex="0"><a href="#">1</a></li>
                                            <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                tabindex="1"><a href="#">2</a></li>
                                            <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                tabindex="2"><a href="#">3</a></li>
                                            <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                tabindex="3"><a href="#">4</a></li>
                                            <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                tabindex="4"><a href="#">5</a></li>
                                            <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                tabindex="5"><a href="#">6</a></li>

                                        </ul>
                                        <ul class="pagination">
                                            <li class="paginate_button next" aria-controls="dataTables-example"
                                                tabindex="0" id="dataTables-example_next"><a href="#"
                                                                                             onclick="onPage(this)">Next</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                            </div>


                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->

                <!-- /.row -->
                    <%----%>
                    <%----%>
            </div>
        </div>
        <!--列表结束-->
    </div>

    <!-- /.modal -->
    <div class="modal fade" id="showSim">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">SIM卡信息</h4>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div id='addRole'>
                            <input name="id" type="hidden"/>
                            <div class="condi_container">
                                <span class="cd_name">卡号</span>
                                <span class="cd_val" id='msisdn'>

								</span>
                                <div class="condi_container">
                                    <span class="cd_name">串号</span>
                                    <span class="cd_val" id='iccid'>

								</span>
                                </div>
                                <div class="condi_container">
                                    <span class="cd_name">运营商</span>
                                    <span class="cd_val" id='carrier'>

								</span>
                                </div>
                                <div class="condi_container">
                                    <span class="cd_name">失效日期</span>
                                    <span class="cd_val" id='expiry_date'>

								</span>
                                </div>
                                <div class="condi_container">
                                    <span class="cd_name">套餐大小</span>
                                    <span class="cd_val" id='data_plan'>

								</span>
                                </div>
                                <div class="condi_container">
                                    <span class="cd_name">当月流量</span>
                                    <span class="cd_val" id='data_usage'>

								</span>
                                </div>

                                <div class="condi_container">
                                    <span class="cd_name">账户状态</span>
                                    <span class="cd_val" id='account_status'>
                                </span>
                                </div>

                                <div class="condi_container">
                                    <span class="cd_name">激活状态</span>
                                    <span class="cd_val" id='active'>
                                </span>
                                </div>

                                <div class="condi_container">
                                    <span class="cd_name">测试期起始日期</span>
                                    <span class="cd_val" id='test_valid_date'>
                                </span>
                                </div>

                                <div class="condi_container">
                                    <span class="cd_name">沉默期起始日期</span>
                                    <span class="cd_val" id='silent_valid_date'>
                                </span>
                                </div>

                                <div class="condi_container">
                                    <span class="cd_name">测试期已用流量</span>
                                    <span class="cd_val" id='test_used_data_usage'>
                                </span>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->


    <!-- /.modal -->
    <div class="modal fade" id="showhistroy">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">SIM流量信息</h4>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <table class="table table-striped table-bordered table-hover tablefont" id="dataTables-list"
                               style="width:518px">
                            <thead>
                            <tr>
                                <th class="center">日期</th>
                                <th class="center">中控号</th>
                                <th class="center">卡号</th>
                                <th class="center">流量</th>
                            </tr>
                            </thead>
                            <tbody id="tbodylist">
                                <%--<tr class="odd gradeX"><td>车架号</td><td>中控号</td><td>GPS号</td> <td class="center">APP号</td> <td class="center">已下线</td> <td class="center"><a class = "fa fa-eye"></a></td></tr>--%>
                                <%--<tr class="odd gradeX"><td>车架号</td><td>中控号</td><td>GPS号</td> <td class="center">APP号</td> <td class="center">运输中</td> <td class="center"><a class = "fa fa-eye"></a></td></tr>--%>
                                <%--<tr class="odd gradeX"><td>车架号</td><td>中控号</td><td>GPS号</td> <td class="center">APP号</td> <td class="center">已销售</td> <td class="center"><a class = "fa fa-eye"></a></td></tr>--%>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->


    <script>

        function queryBut() {
            queryList($('.active').attr("tabindex"), $("#dataTables-example_length").val())
        }


        function queryList(page, size) {
            var albObj = {};
            albObj.pagesize = size;
            albObj.pagenumber = page;
            albObj.controllerId = $("#q_sn").val();
            albObj.iccid = $("#q_iccid").val();
            albObj.status = $("#status").val();
            $.ajax({
                url: '${pageContext.request.contextPath}/v1/actors/system/simcard',
                type: 'post',
                datatype: 'json',
                data: JSON.stringify(albObj),
                contentType: 'application/json;charset=utf-8',
                Accept: 'application/json',
                cache: false,
                success: function (data, textStatus, jqXHR) {
                    $("#tbody").empty();
                    $(data.data).each(function () {
                        var flux_alread="";
                        var flux_nouse="";
                        if(this.flux_alread!=""){
                            flux_alread=parseFloat(this.flux_alread).toFixed(3);
                        }
                        if(this.flux_nouse!=""){
                            flux_nouse=parseFloat(this.flux_nouse).toFixed(3);
                        }
                        $("#tbody").append('<tr class="odd gradeX"><td class="center">' + this.controllerId
                            + '</td><td class="center">' + this.imsi + '</td> <td class="center">'
                            + this.sim_status_desc + '</td> <td class="center">' + this.active
                            + '</td><td class="center">' + flux_alread
                            + '</td><td class="center">' + flux_nouse
                            + '</td><td class = "center">' + this.lastapiupdatetime
                            + '</td> <td class="center">' +
                            '<a class = "fa fa-refresh"   href="#" onclick="querySimOne(\'' + this.imsi + '\')" >刷新</a>  &nbsp;&nbsp;' +
                            '<a class = "fa fa-search"   href="#showhistroy" data-toggle="modal"    onclick="querySimlist(\'' + this.controllerId + '\')" >明细</a></td></tr>').data("item", this);
                    });



                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#result').text(errorThrown);
                }
            });
        }

        //填充 流量数据的模式窗体
        function querySimlist(controllerId) {
            var albObj = {};
            albObj.controllerId = controllerId;
            albObj.beginday = '20160820';
            albObj.endday = '20160905';

            $.ajax({
                url: '${pageContext.request.contextPath}/v1/actors/machines/simhistroy',
                type: 'POST',
                datatype: 'json',
                data: JSON.stringify(albObj),
                contentType: 'application/json;charset=utf-8',
                Accept: 'application/json',
                cache: false,
                success: function (data, textStatus, jqXHR) {

                    $("#tbodylist").empty();
                    $(data.data).each(function () {
                        $("#tbodylist").append('<tr class="odd gradeX"><td class="center">' + this.statis_date
                            + '</td><td class="center">' + this.controllerId + '</td><td class="center">' + this.imei + '</td> ' +
                            ' <td class="center">' + this.flux_day + '</td>').data("item", this);
                    });


                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#result').text(errorThrown);
                }
            });
        }


        //根据串号获取单张卡信息
        function querySimOne(msisdn) {
//            var params = new Object();
//            params.msisdn = msisdn;
            $.ajax({
                url: '${pageContext.request.contextPath}/v1/actors/sms/card/iccid/'+msisdn,
                type: 'GET',
//                data:JSON.stringify(params),
                datatype: 'json',
                contentType: 'application/json;charset=utf-8',
                Accept: 'application/json',
                cache: false,
                success: function (data, textStatus, jqXHR) {
                    if (data.code == 200) {
                        $("#msisdn").text(data.msisdn);
                        $("#iccid").text(data.iccid);
                        $("#carrier").text(data.carrier);
                        $("#expiry_date").text(data.expiry_date);
                        $("#data_plan").text(data.data_plan);
                        $("#data_usage").text(data.data_usage);
                        var account_status = "";
                        if ("00" == data.account_status) {
                            account_status = "正常";
                        } else if ("01" == data.account_status) {
                            account_status = "单项停机";
                        } else if ("02" == data.account_status) {
                            account_status = "停机";
                        } else if ("03" == data.account_status) {
                            account_status = "预销号";
                        } else if ("04" == data.account_status) {
                            account_status = "销号";
                        } else if ("05" == data.account_status) {
                            account_status = "过户";
                        } else if ("06" == data.account_status) {
                            account_status = "休眠";
                        } else if ("07" == ata.account_status) {
                            account_status = "待激活";
                        } else if ("99" == data.account_status) {
                            account_status = "未知";
                        } else {
                            account_status = "";
                        }
                        $("#account_status").text(account_status);
                        var active = "";
                        if ('true' == data.active) {
                            active = '已激活';
                        } else {
                            active = '未激活';
                        }
                        $("#active").text(active);
                        $("#test_valid_date").text(data.test_valid_date);
                        $("#silent_valid_date").text(data.silent_valid_date);
                        $("#test_used_data_usage").text(data.test_used_data_usage);
                        queryBut();
                        $('#showSim').modal('toggle');

                    } else {
                        showalert(1,data.msg);
                        queryBut();
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#result').text(errorThrown);
                }
            });
        }

        //根据卡号获取单张卡信息
        function querySimOneForImsi(msisdn) {
            $.ajax({
                url: '${pageContext.request.contextPath}/v1/actors/sms/card/' + msisdn,
                type: 'GET',
                datatype: 'json',
                contentType: 'application/json;charset=utf-8',
                Accept: 'application/json',
                cache: false,
                success: function (data, textStatus, jqXHR) {
                    if (data.code == 200) {
                        $("#msisdn").text(data.msisdn);
                        $("#iccid").text(data.iccid);
                        $("#carrier").text(data.carrier);
                        $("#expiry_date").text(data.expiry_date);
                        $("#data_plan").text(data.data_plan);
                        $("#data_usage").text(data.data_usage);
                        queryBut();
                    } else {
                        showalert(1,data.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#result').text(errorThrown);
                }
            });
        }

        function batchUpdate() {
            $.ajax({
                url: '${pageContext.request.contextPath}/v1/smc/batchUpdate',
                type: 'GET',
                datatype: 'json',
                contentType: 'application/json;charset=utf-8',
                Accept: 'application/json',
                cache: false,
                success: function (data, textStatus, jqXHR) {
                    showalert(0,"更新成功！");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#result').text(errorThrown);
                }
            });
        }



    </script>
    <%@include file="../alert.jsp"%>
</page:page>